<template>
  <div>
    <el-card shadow="never">
      <header-title title="采集器管理"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="21">
          <div>
            采集器编号:
            <el-input v-model="collectorNo" placeholder="请输入内容" size="small" style="margin-right: 15px;width: 150px;"></el-input>
            <el-button @click="search" class="button" size="small" round icon="el-icon-search" style="margin: 10px 0;">查询</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <el-button @click="add" class="button" size="small" round>添加采集器</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="tableData" v-loading="loading" style="width: 100%">
          <el-table-column prop="sidName" label="供应商名称"></el-table-column>
          <el-table-column prop="collectorNo" label="采集器编号"></el-table-column>
          <el-table-column prop="isOnline" label="是否在线"></el-table-column>
          <el-table-column prop="type" label="采集器类型"></el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button @click="remove(scope.row)" type="text" style="color:#dc1033;">删除</el-button>
            </template>
          </el-table-column>
          <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changePage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="添加采集器" :visible.sync="addDialog" @close="close" v-if="addDialog">
      <div>
        <el-form :model="addModel" label-width="120px" ref="addModel" :rules="rules">
          <el-form-item label="供应商名称：" prop="sidName">
            <el-select v-model="addModel.sidName" @change="changeSidName" placeholder="请选择">
              <el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采集器编号：" prop="collectorNo">
            <el-input v-model="addModel.collectorNo"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save('addModel')">保存采集器</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import HeaderTitle from "@/components/HeaderTitle"
  export default {
    name: 'collector',
    components: {
      HeaderTitle
    },
    data(){
      return {
        loading: true,
        tableData: [],
        collectorNo: '', //	string	false	采集器编号
        perPage: 10, // 每页显示10条
        page: 1, // 当前页
        total: 0,

        addDialog: false,
        addModel:{
          sid: 1, //	int	true	供应商id
          sidName: '', //	string	true	供应商名称
          collectorNo: '', //	string	true	采集器编号
        },

        // 供应商列表
        supplierList: [],
         rules: {
        sidName: [
          { required: true, message: "请选择供应商名称", trigger: "change" },
        ],
        collectorNo: [
          { required: true, message: "请输入采集器编号", trigger: "change" },
        ],
      },
      }
    },
    watch: {
      '$store.state.app.marketId'(val, oldVal){
        this.getDataList(this.collectorNo, this.perPage, this.page)
      }
    },
    mounted(){
      this.getDataList(this.collectorNo, this.perPage, this.page)
    },
    methods:{
      // 获取采集器列表
      getDataList(collectorNo){
        this.$store.dispatch('waterElectricMeter/fetchCollectorList',{collectorNo}).then(
          data => {
            this.loading = false
            for(let i=0;i<data.items.length;i++){
              if(data.items[i].isOnline === 1){
                data.items[i].isOnline = '在线'
              }else {
                data.items[i].isOnline = '离线'
              }
            }
            this.tableData = data.items
            this.total = data.total
          }
        ).catch(err => {
          this.loading = false
          this.tableData = []
          this.total = 0
        })
      },
      search(){
        this.page = 1
        this.getDataList(this.collectorNo, this.perPage, this.page)
      },
      changePage(num){
        this.page = num
        this.getDataList(this.collectorNo, this.perPage, num)
      },
      // 点击添加
      add(){
        console.log('add')
        this.addDialog = true
        // 获取供应商列表
        this.$store.dispatch('waterElectricMeter/fetchSupplierList').then(
          data => {
            let items = []
            for (let item of data) {
              items.push({
                value: item.sid + '',
                label: item.name
              })
            }
            this.supplierList = items
          }
        ).catch(err => {
          this.supplierList = []
        })
      },
      changeSidName(type){
        this.addModel.sid = type
        // 用原数据查id对应name
        let obj = {}
        obj = this.supplierList.find((item)=>{ // 这里的 this.supplierList 就是上面遍历的数据源
          return item.value === type // 筛选出匹配数据 数据源里的 id 等于 当前选中的 id
        })
        this.addModel.sidName = obj.label
      },
      save(addModel){
        console.log(this.addModel)
        this.$refs[addModel].validate(valid => {
        if (valid) {
        this.addDialog = false
        this.$store.dispatch('waterElectricMeter/fetchSaveCollector', this.addModel).then(
          data => {
            console.log('success')
            console.log(data)
            // 成功之后调用列表
            // 调用 close
            if(data){
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
            this.getDataList(this.collectorNo, this.perPage, this.page)
            this.addModel = {}
          }
        ).catch(err => {
        })
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
      },
      close(){
        this.addModel = {}
      },
      // 点击删除
      remove(row){
        if(row.type === 1){
          this.$message({
            type: 'warning',
            message: '不可以删除!'
          })
        }else{
          let id = row.id
//        this.$confirm(`是否确定要删除采集器 "${row.sid}"`, '提示', {
          this.$confirm(`是否确定要删除?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('waterElectricMeter/fetchRemoveCollector', {id}).then(
              data => {
                console.log(data.data)
                if(data.data){
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                }
                this.getDataList(this.collectorNo, this.perPage, this.page)
              }
            ).catch(err => {
              console.log('err')
              console.log(err)
            })
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .button {
    background: #64d9d6;
    color: #fff;
    margin-left: 40px;
  }
</style>
